.login {
    height: 100vh;
    min-height: 500px;
    padding-top: 140px;
    background: rgb(240, 244, 248);

    text-align: center;
    &:before {
        // height: ~"calc(100% - 110px)";
        width: 0px;
        content: "";
    }
}
.switch {
    height: 100vh;
    min-height: 500px;
    background: rgb(240, 244, 248);

    text-align: center;
    &:before {
        // height: ~"calc(100% - 110px)";
        width: 0px;
        content: "";
    }
}

.l-wrap {
    position: relative;
    width: 320px;
    margin: 0 auto 40px;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06);
    box-sizing: border-box;
}
// .l-wrap,
// .login:before {
//     display: inline-block;
//     vertical-align: middle;
// }

// .l-wrap {
//     position: relative;
//     width: 80%;
//     max-width: 500px;
//     margin-top: -50px;
//     &.toggled {
//         display: inline-block;
//     }

//     .input-group:not(:last-child) {
//         margin-bottom: 40px;
//     }
// }

.l-footer {
    height: 110px;
    padding: 0 50px;
}

.lf-logo {
    float: right;
    img {
        width: 40px;
    }
}

.lf-server {
    float: left;
    color: rgba(255, 255, 255, 0.4);
    font-size: 20px;
    font-weight: 400;
    padding-top: 40px;
}
.ldap-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-top: 20px;
    color: #fff;
    opacity: 0.3;
    border-bottom: 1px solid;
    font-size: 14px;
    letter-spacing: 0.04rem;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
        color: #fff;
        opacity: 0.8;
    }
}
.wf {
    position: absolute;
    top: 50px;
    left: 50px;
    height: 25px;
}

.banner {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    // height: 100vh;
    text-align: center;
    h1 {
        margin-top: 80px;
        font-size: 22px;
        color: @kubes-c;
    }
}
.tologin {
    padding: 5px 15px;
    border: none;
    background-color: @kubes-c;
    color: #fff;
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.3s;
    &:hover {
        background-color: @kubes-b;
    }
}
.hidden-form {
    width: 100%;
    height: 100%;
}
.hidden-input {
    position: absolute;
    visibility: hidden;
}
.hidden-submit {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    color: transparent;
    border: transparent;
}
.banner-ct {
    margin: 0 auto;
    padding-top: 40px;
    // width: 80%;
    max-width: 980px;
    height: 500px;
    .banner-item {
        position: relative;
        float: left;
        margin: 20px 13px;
        width: 300px;
        height: 350px;
        text-align: left;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06);
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s;
        transition-delay: 0.1s;
        .bg {
            width: 100%;
            height: 204px;
            text-align: center;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            img {
                display: inline-block;
                margin-top: 30px;
                width: 150px;
            }
        }
        .bg1 {
            background-image: url(../../img/bg1.png);
        }
        .bg2 {
            background-image: url(../../img/bg2.png);
        }
        .bg3 {
            background-image: url(../../img/bg3.png);
        }
        .banner-content {
            padding: 20px;
            img {
                position: absolute;
                right: 20px;
                bottom: 12px;
                width: 24px;
            }
        }
        h2 {
            margin-top: 0;
            font-size: 28px;
            color: #00232e;
        }
        p {
            position: absolute;
            left: 20px;
            bottom: 0;
            font-size: 14px;
            color: #0080ff;
        }
        &:hover {
            margin: 10px 13px;
        }
    }
}

@media (max-width: @screen-sm-min) {
    .lf-logo,
    .lf-server {
        float: none;
        display: block;
        text-align: center;
        width: 100%;
    }

    .lf-logo {
        margin-bottom: 5px;
    }

    .lf-server {
        font-size: 15px;
    }
}

// kubesphere样式 START
.title {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: #242e42;
    font-size: 20px;
    font-weight: 600;
}
.login-header {
    position: relative;
    font-weight: 600;
    font-size: 12px;
    color: #242e42;
    line-height: 20px;
    text-align: center;
}
.login-divider {
    width: 100%;
    height: 0;
    margin-top: 12px;
    margin-bottom: 20px;
    opacity: 0.6;
    border-bottom: 1px solid;
    border-image-source: radial-gradient(circle at 50% 0, #abb4be, #ffffff 100%);
    border-image-slice: 1;
}
// .login-form-item {
//     margin-top: 12px;
// }
// .login-form-item label {
//     display: block;
//     font-size: 12px;
//     line-height: 20px;
//     font-weight: 600;
//     color: #36435c;
//     margin-bottom: 4px;
// }
// .login-form-item input {
//     width: 100%;
//     height: 36px;
//     padding: 8px 35px 8px 12px;
//     border-radius: 4px;
//     background-color: #ffffff;
//     border: solid 1px #cfd9df;
//     font-family: Roboto;
//     font-size: 12px;
//     font-weight: 600;
//     line-height: 20px;
//     color: #303e5a;
//     outline: none;
//     box-sizing: border-box;
//     transition: all 0.3s ease-in-out;
//     &:hover {
//         border-color: @kubes-g;
//     }
//     &:focus {
//         border-color: @kubes-f;
//     }
// }
// .login-form-item svg {
//     position: absolute;
//     top: 50%;
//     right: 8px;
//     transform: translateY(-50%);
//     cursor: pointer;
// }
.lw-btn {
    position: relative;
    width: 100%;
    height: 32px;
    margin-top: 12px;
    border-radius: 100px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    box-shadow: 0 8px 16px 0 rgba(36, 46, 66, 0.28);
    border: solid 1px @kubes-c;
    background-color: @kubes-c;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    &:hover {
        box-shadow: none;
    }

    // i {
    //     display: block;
    //     width: 100%;
    //     padding-left: 3px;
    // }
}
// kubesphere样式 end

// .lw-btn {
//     width: 50px;
//     height: 50px;
//     border: 1px solid @white;
//     display: inline-block;
//     border-radius: 50%;
//     font-size: 22px;
//     color: @white;
//     .transition(all);
//     .transition-duration(300ms);
//     opacity: 0.3;
//     background-color: transparent;
//     line-height: 45px;
//     padding: 0;
//     &:hover {
//         color: @white;
//         opacity: 0.8;
//         border-color: @white;
//     }

//     i {
//         display: block;
//         width: 100%;
//         padding-left: 3px;
//     }
// }
.ld-btn {
    width: 120px;
    height: 50px;
    border: 1px solid @white;
    display: inline-block;
    border-radius: 30px;
    font-size: 18px;
    color: @white;
    .transition(all);
    .transition-duration(300ms);
    opacity: 0.3;
    background-color: transparent;
    line-height: 45px;
    padding: 0;
    &:hover {
        color: @white;
        opacity: 0.8;
        border-color: @white;
    }
}

.openid-login {
    margin-top: 30px;
}

.openid-btn {
    display: inline-block;
    color: @link-color;
    margin-top: 30px;
    border-width: 1px;
    border-style: solid;
    opacity: 0.6;
    font-size: 14px;
    &:hover {
        opacity: 1;
        cursor: pointer;
    }
}

.or {
    display:flex;
    justify-content:center;
    align-items: center;
    color:grey;
  }

.or:after,
.or:before {
    content: "";
    display: block;
    background: grey;
    width: 10px;
    height: 1px;
    margin: 0 10px;
}

/*------------------------------
    Chrome autofill fix
-------------------------------*/
input:-webkit-autofill {
     -webkit-box-shadow:0 0 0 50px rgb(232, 240, 254) inset !important;
     -webkit-text-fill-color: @black !important;
    caret-color: white;
}
input::-webkit-input-placeholder { /* WebKit browsers */ 
    font-weight: normal;
} 
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    font-weight: normal;
} 
input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    font-weight: normal;
} 
input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    font-weight: normal;
} 
